import React, { memo } from 'react';
import { AlbumCommentWrapper } from './style';
import Comment from '@/components/comment'
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import {getAlbumCommentsAction} from '../../store/actionCreators'
export default memo(function AlbumComment() {

  const { albumComments, commentsCount,albumDetail } = useSelector(state => ({
    albumComments: state.getIn(['album', 'albumComments']),
    commentsCount: state.getIn(['album', 'commentsCount']),
    albumDetail:state.getIn(['album','albumDetail'])
  }), shallowEqual)
  const commentList = albumComments
  const dispatch = useDispatch()
  const pageChange = page => {
    const offset = (page - 1) * 20
    const id = albumDetail.id
    dispatch(getAlbumCommentsAction(id,offset))
  }
  return (
    <AlbumCommentWrapper>
      <Comment  totalComment={commentsCount}
                commentList={commentList}
                pageSize={20}
                pageChange={pageChange}
      />
    </AlbumCommentWrapper>
  );
});
